<template>
  <div class="container">
    <div class="headTop">
      <el-row>
        <el-col :span="4">
          <div class="title">影视链管理系统</div>
        </el-col>
        <el-col :span="20">
          <div class="userInfo">
            {{account}},欢迎登陆 &nbsp; &nbsp; &nbsp;
            <span @click="logout()" class="logout">退出</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main">
      <el-row>
        <el-col :span="4">
          <div class="sidebar" :style="{'height':(windowHeight - 60)+'px'}">
            <sideBar></sideBar>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="cont">
            <breadCrumb></breadCrumb>
            <div class="cont-wrapper" :style="{'height':(windowHeight-124)+'px'}">
              <div class="contInfo">
                <router-view></router-view>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import sideBar from "../views/common/sidebar.vue";
import breadCrumb from "../views/common/breadcrumb";
export default {
  data() {
    return {
      windowHeight: document.documentElement.clientHeight,
      account: ""
    };
  },
  created() {
    this.account = sessionStorage.getItem("account");
  },
  components: { sideBar, breadCrumb },
  methods: {
    logout() {
      let url = "/user/logout";
      this.httpGet(url, res => {
        if (res.code == 200) {
          this.$message({
            message: "退出成功",
            type: "success"
          });
          this.$router.push("/");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .headTop {
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    line-height: 60px;
    width: 100%;
    z-index: 99;
    background: #66b1ff;
    .title {
      color: #fff;
      font-size: 20px;
      padding-left: 10px;
    }
  }
  .userInfo {
    text-align: right;
    color: #fff;
    padding-right: 10px;
    .logout{
      cursor: pointer;
    }
  }
  .main {
    margin-top: 60px;
    .sidebar {
      width: 100%;
      background: #545c64;
      overflow-y: scroll;
    //取消滚动条默认样式
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      display: none;
    }
    }
    .cont {
      background: #eee;
       overflow-y:scroll;
        .cont-wrapper {
      background: #fff;
      overflow-y: scroll;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
      &::-webkit-scrollbar {
        display: none;
      }
      .contInfo {
        margin: 10px;
        background: #fff;
        height: 96%;
      }
    }
    }
    .contInfo {
      padding: 10px;
      // text-align: center;
      // height: 100%;
      // width: 100%;
      // box-sizing: border-box;
      // border: 1px solid #000;
    }
  }
}
</style>
